<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <footer class="w-full bg-gray-900 text-gray-300 py-16">
    <div class="max-w-7xl mx-auto px-4">
      <!-- 主要内容区域 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
        <!-- 品牌信息区 -->
        <div class="space-y-4">
          <img :src="logoUrl" alt="旅游网站" class="h-12 w-auto" />
          <p class="text-sm leading-relaxed">
            探索世界的每个角落，让我们为您打造难忘的旅行体验。十年匠心经营，服务超过1000万旅行者，打造精品旅游路线。
          </p>
          <p class="text-lg font-semibold">发现精彩，从这里开始</p>
        </div>

        <!-- 快速导航区 -->
        <div>
          <h3 class="text-white font-medium text-lg mb-4">快速导航</h3>
          <ul class="space-y-2">
            <li v-for="(item, index) in quickLinks" :key="index">
              <a :href="item.link" class="hover:text-white transition-colors duration-300">{{ item.text }}</a>
            </li>
          </ul>
        </div>

        <!-- 旅游产品区 -->
        <div>
          <h3 class="text-white font-medium text-lg mb-4">旅游产品</h3>
          <ul class="space-y-2">
            <li v-for="(item, index) in products" :key="index">
              <a :href="item.link" class="hover:text-white transition-colors duration-300">{{ item.text }}</a>
            </li>
          </ul>
        </div>

        <!-- 联系方式区 -->
        <div>
          <h3 class="text-white font-medium text-lg mb-4">联系我们</h3>
          <div class="space-y-4">
            <p class="flex items-center">
              <el-icon class="mr-2"><Phone /></el-icon>
              <span>客服电话：400-888-8888</span>
            </p>
            <p class="flex items-center">
              <el-icon class="mr-2"><Clock /></el-icon>
              <span>服务时间：09:00-21:00</span>
            </p>
            <p class="flex items-center">
              <el-icon class="mr-2"><Message /></el-icon>
              <span>邮箱：service@travel.com</span>
            </p>
            <div class="flex space-x-4">
              <a v-for="(social, index) in socials"
                 :key="index"
                 :href="social.link"
                 class="hover:text-white transition-colors duration-300"
                 :title="social.name">
                <el-icon class="text-xl"><component :is="social.icon" /></el-icon>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- 分隔线 -->
      <div class="border-t border-gray-700 pt-8">
        <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
          <!-- 版权信息 -->
          <div class="text-sm">
            <span>© 2024 环球旅行网. 保留所有权利</span>
            <span class="mx-2">|</span>
            <span>ICP备案号：京ICP备12345678号</span>
          </div>
          <!-- 资质认证 -->
          <div class="flex items-center space-x-4">
            <img :src="cert1Url" alt="认证标识" class="h-10 w-auto" />
            <img :src="cert2Url" alt="认证标识" class="h-10 w-auto" />
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { ref } from 'vue';
import { Phone, Clock, Message, ChatDotRound, Share } from '@element-plus/icons-vue';

const logoUrl = 'https://ai-public.mastergo.com/ai/img_res/24615bf3751365726c8bd81fa58c139f.jpg';

const cert1Url = 'https://ai-public.mastergo.com/ai/img_res/6d778570c7ba19313f13cbf10ee40768.jpg';

const cert2Url = 'https://ai-public.mastergo.com/ai/img_res/964a6e795b4f8af03eebafc909017609.jpg';

const quickLinks = [
  { text: '关于我们', link: '#' },
  { text: '旅游攻略', link: '#' },
  { text: '热门目的地', link: '#' },
  { text: '帮助中心', link: '#' },
  { text: '隐私政策', link: '#' }
];

const products = [
  { text: '国内精品游', link: '#' },
  { text: '出境特色游', link: '#' },
  { text: '定制自由行', link: '#' },
  { text: '高端跟团游', link: '#' },
  { text: '主题度假游', link: '#' }
];

const socials = [
  { name: '微信', icon: 'ChatDotRound', link: '#' },
  { name: '微博', icon: 'Share', link: '#' }
];
</script>

<style scoped>
.footer-link {
  @apply text-gray-400 hover:text-white transition-colors duration-300;
}
</style>

